<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>百度一下，你就知道</title>
  <!--插入标题图片-->
  <link rel="icon" href="./favicon.ico">
  <!--导入字体图标样式-->
  <link rel="stylesheet" href="./css/iconfont.css">
  <script src="./js/jquery-1.12.4.min.js"></script>
  <style>
  /*全局样式*/
  body{
    margin:0;
    font-family: Arial;
  }
  ul{
    margin:0;
    padding:0;
    list-style: none;
  }
  img{
    vertical-align: bottom;
  }
  a{
    text-decoration: none;
  }
  /*顶部导航条样式*/
  .navbar{
    height: 60px;
    padding:0 24px;
    font-size:13px;
    /* 最小宽度 */
    min-width: 1000px;
  }
  .menu{
    height: 60px;
    float:left;
    line-height: 60px;
  }
  .menu li{
    height: 60px;
    float:left;
    margin-right: 24px;
  }
  .menu li a{
    color:#222;
  }
  .menu li:hover a{
    color:#315efb;
  }
  .menu li.more{
    /* 相对定位 */
    position: relative;
  }
  /*更多下的盒子样式*/
  .menu li.more .moreBox{
    /* 盒子最初为隐藏状态 */
    display: none;
    width:228px;
    height:282px;
    /* 设置圆角 */
    border-radius: 12px;
    /* 设置阴影效果 */
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
    /* 绝对定位 */
    position: absolute;
    right:-11px;
    top:47px;
    padding:8px 0;
    background-color: #fff;
  }
  .moreBox li{
    width:60px;
    height:82px;
    line-height: 15px;
    text-align: center;
    margin:0 8px;
  }
  .moreBox li img{
    width: 44px;
    height:44px;
    margin: 8px;
  }
  .menu li.more:hover .moreBox a{
    color:#222;
  }
  .menu li.more .moreBox li:hover a{
    color:#315efb;
  }
  .moreBox li.all{
    width:212px;
    height: 32px;
    line-height: 32px;
    margin-top:4px;
  }
  .menu li.more:hover .moreBox li.all a{
    color:#9195a3;
  }
  .moreBox li:hover{
    /* 设置圆角 */
    border-radius: 8px;
    background-color: #f1f3fd;
  }
  .menu li.more:hover .moreBox{
    /* 鼠标移动到更多上，则显示更多下的盒子 */
    display: block;
  }
  .setting{
    height: 60px;
    float:right;
  }
  .setting li{
    float: left;
  }
  .setting li.setBox{
    line-height: 60px;
    color: #222;
    margin-right:32px;
    position: relative;
  }
  .setting li.setBox span{
    cursor: pointer;
  }
  .setting li.setBox span:hover{
    color:#315efb;
  }
  .setting li.setBox div{
    display: none;
    position: absolute;
    top: 47px;
    left: -28px;
    width:84px;
    /* 设置阴影 */
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
    /* 设置圆角 */
    border-radius: 12px;
    padding:10px 0;
  }
  .setting li.setBox div a{
    display: block;
    color:#333;
    line-height: 26px;
    text-align: center;
  }
  .setting li.setBox div a:hover{
    color:#315efb;
  }
  .setting li.setBox:hover div{
    display: block;    
  }
  .setting li.loginBtn{
    width: 48px;
    height: 24px;
    background-color: #4e6ef2;
    text-align: center;
    line-height: 24px;
    color:#fff;
    /* 设置圆角 */
    border-radius: 6px;
    margin-top:18px;
    cursor: pointer;
  }
  .setting li.loginBtn:hover .mask{
    display: block;
  }
  /* 黑色半透明遮罩层 */
  .mask{
    display: none;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background-color:rgba(0,0,0,.4);
  }
  .loginBox{
    width:800px;
    height:447px;
    background:#fff;
    /* 设置圆角 */
    border-radius: 16px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-400px;
    margin-top:-223px;
    font-family: "PingFang SC";
    font-size:14px;
    /* padding:20px 0; */
  }
  .close{
    padding:0 32px;
    width:736px;
    overflow: hidden;
    position: relative;
    top:20px;
  }
  .close a{
    float:left;
  }
  .close a img{
    width:94px;
    height:30px;
  }
  .close img.closeBtn{
    width:21px;
    height:21px;
    float:right;
  }
  .loginContent{
    border-bottom:1px #eee solid;
    padding:0 32px;
    overflow: hidden;
  }
  .qrcode{
    width: 368px;
    float:left;
    border-right: 1px #eee solid;
    padding-top:63px;
  }
  .qrcode-img{
    overflow: hidden;
  }
  .qrcode-img div{
    width: 160px;
    height:149px;
    border:1px rgba(133,133,133,0.3) solid;
    border-radius: 9px;
    text-align: center;
    padding-top:11px;
    float:left;
    margin-right:37px;
  }
  .qrcode-img div img{
    width:138px;
    height:138px;
  }
  .qrcode-img img.guide{
    width: 134px;
    height: 160px;
    float:left;
  }
  .qrcode p{
    color:#000;
    font-size:18px;
  }
  .download{
    height:24px;
    line-height: 24px;
    padding:8px 18px;
    background:#f5f5f6;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 15px;
    position: relative;
  }
  .download a{
    color:#4e6ef2;
  }
  .download a img{
    width: 20px;
    height: 21px;
    margin-right:3px;
  }
  .download .downloadBox{
    display: none;
    position: absolute;
    top: -284px;
    left: -116px;
    height:268px;
    width: 339px;
    border-radius: 12px;
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 15%);
    background-color: #fff;
  }
  .download .downloadBox div{
    width: 172px;
    height: 172px;
    border: 1px solid #b8b8b8;
    border-radius: 9px;
    margin:30px auto;
    margin-bottom: 20px;
  }
  .download .downloadBox div img{
    width: 148px;
    height: 148px;
    margin-top: 12px;
  }
  .download .downloadBox p{
    color:#1f1f1f;
  }
  .download:hover .downloadBox{
    display: block;
  }
  .loginForm{
    width: 367px;
    float: left;
  }
  .loginMode{
    padding:0 32px;
    color:#858585;
    overflow: hidden;
    margin-bottom: 37px;
  }
  .loginMode h1{
    font-size:18px;
    font-weight: normal;
    float:left;
    margin:0;
    padding-bottom:5px;
    margin-right:30px;
  }
  .loginMode h1.now{
    color:#222;
    font-weight: bold;
    border-bottom: 2px #4e6ef2 solid;
  }
  .input{
    height:48px;
    margin-bottom:14px;
    text-align: left;
    padding-left: 32px;
  }
  .input input{
    height: 26px;
    width:294px;
    line-height: 26px;
    border:1px #b8b8b8 solid;
    border-radius: 8px;
    padding:10px 20px;
    font-size:18px;
    color:#1f1f1f;
    /* 去除轮廓线 */
    outline: none;
  }
  .loginForm p{
    color:#4e6ef2;
    text-align: right;
  }
  .sub{
    text-align: left;
    padding-left: 32px;
  }
  .sub input{
    width: 336px;
    height:48px;
    line-height: 48px;
    border-radius: 10px;
    box-shadow: 0 6px 16px 0 rgb(78 111 242 / 30%);
    font-size:17px;
    color:#fff;
    border:0;
    background-color: #4e6ef2;
    font-weight: bold;
    cursor: pointer;
  }
  .sub input:hover{
    background-color: #4662d9;
  }
  .readme{
    color:#525252;
    line-height: 62px;
    text-align: left;
    padding-left:86px;
  }
  .other{

  }
  .left{
    float: left;
    font-size: 0;
    padding: 26px 0 0 32px;
  }
  .left a{
    margin-right:16px;
  }
  .left img{
    width: 28px;
    height: 28px;
  }
  .register{
    float:right;
    padding:26px 32px 0 0;
  }
  /*logo样式*/
  .logo{
    min-width: 1000px;
    text-align: center;
  }
  .logo img{
    width:270px;
    height: 129px;
    position: relative;
    top: -15px;
    z-index: -1;
  }
  /* 搜索框样式 */
  .container{
    min-width: 1000px;
  }
  .searchBox{
    width:654px;
    height:44px;
    margin:0 auto;
  }
  .searchBorder{
    width: 542px;
    /* height: 40px; */
    border:2px solid #c4c7ce;
    border-right-color: #4e6ef2;
    /* 设置左上角和左下角圆角 */
    border-radius: 10px 0 0 10px;
    float:left;
  }
  .searchBorder:hover{
    border-color:#a7aab5;
    border-right-color:#4e6ef2;
  }
  /*搜索框获取焦点后变蓝色边框样式*/
  .searchBox .focus{
    border-color:#4e6ef2;
    /* border-right:2px #4e6ef2 solid; */
    /* 设置右下角圆角 */
    border-bottom-right-radius: 10px;
  }
  /*提示内容，默认不显示*/
  .tips{
    display: none;
    margin:0 14px;
    border-top: 2px #f5f5f6 solid;
    padding:8px 0 7px;
  }
  .tips a{
    display: block;
    line-height: 28px;
    font-size:14px;
    color:#626675;
  }
  .tips a:hover{
    color:#315efb;
    background-color:#f5f5f6;
    margin: 0 -14px;
    padding-left: 14px;
  }
  .searchBorder input{
    width: 443px;
    padding:12px 16px;
    font-size:16px;
    color:#222;
    border:0;
    border-radius: 10px 0 0 10px;
    outline: none;
    height: 16px;
    float:left
  }
  /* 相机图标 */
  .searchBorder span{
    float:left;
    width: 24px;
    height: 20px;
    background: url(./images/nicon.png) left -50px no-repeat;
    margin:10px 0 0 24px;
    position: relative;
    z-index: -1;
  }
  .searchBorder span:hover{
    cursor: pointer;
    background-position-y:-74px;
  }
  .searchBorder span i{
    display: none;
    width: 94px;
    height: 32px;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    color:#626675;
    font-size:14px;
    border-radius: 6px;
    text-align: center;
    line-height: 32px;
    position: absolute;
    top:40px;
    right:-14px;
  }
  .searchBorder span:hover i{
    display: block;
  }
  .search{
    width:108px;
    height:44px;
    background-color: #4e6ef2;
    border:0;
    color:#fff;
    float:left;
    /* 设置右上角和右下角圆角 */
    border-radius: 0 10px 10px 0;
    font-size:17px;
  }
  /* 百度热搜样式 */
  .container2{
    min-width: 1000px;
  }
  .container2 ul{
    width: 654px;
    margin:0 auto;
    padding-top:45px;
  }
  .hotsearch-title{
    overflow: hidden;
  }
  .resou{
    float:left;
    height: 24px;
    font:15px/24px Arial;
    color:#000;
    font-weight: bold;
  }
  .resou span{
    float:left
  }
  .resou i{
    float:left;
    color:#9195a3;
    font-size:24px;
    font-weight: 100;
  }
  .resou:hover span,.resou:hover i{
    color:#315efb;
  }
  .refresh{
    float:right;
    color:#626675;
  }
  .refresh i{
    float: right;
    font-size:18px;
  }
  .refresh span{
    float:right;
    font-size: 14px;
  }
  .refresh:hover span,.refresh:hover i{
    color:#315efb;
  }
  .list{
    overflow: hidden;
  }
  .list div{
    width: 50%;
    float: left;
  }
  .list div a{
    display: block;
    font-size:16px;
    color:#222;
    line-height: 36px;
    overflow: hidden;
  }
  .list div a i,.list div a em{
    font-size:18px;
    float:left;
    font-style: normal;
    width: 22px;
    margin-right: 4px;
  }
  .list div a i{
    font-size:16px;
  }
  .list div a span{
    float:left;
  }
  .list div a b{
    float: left;
    font-weight: 200;
    background-color:#f60;
    color:#fff;
    height: 16px;
    line-height: 16px;
    padding:0 2px;
    border-radius: 4px;
    margin: 10px 0 0 6px;
    font-size:12px;
  }
  .list div a .hot1{
    color:#f63051;
  }
  .list div a .hot2{
    color:#f60;
  }
  .list div a .hot3{
    color:#9195a3;
  }
  /*底部导航条样式*/
  .footer{
    height: 39px;
    line-height: 39px;
    padding-top:1px;
    background-color: #fff;
    font-size:12px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .footer a,.footer span{
    color:#bbb;
    margin-right:20px;
  }
  .footer a:hover{
    color:#222;
  }
  .footer img{
    width: 49px;
    height: 20px;
    position: relative;
    top:-10px;
  }
  .toolbar{
    width: 44px;
    background-color: #fbfbfb;
    border-radius: 22px;
    position: fixed;
    right:24px;
    bottom: 64px;
  }
  .help{
    width: 32px;
    height: 32px;
    /* 设置圆角 */
    border-radius: 50%;
    /* 解决父盒子塌陷bug */
    /* overflow: hidden; */
    padding:12px 0 0 12px;
    position: relative;
  }
  .help:hover,.code:hover{
    cursor: pointer;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
  }
  .help div{
    width: 18px;
    height: 18px;
    border:1px #626675 solid;
    border-radius: 50%;
    position: relative;
    /* margin:12px 0 0 12px; */
  }
  .help p{
    display: none;
    width: 84px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
    border-radius: 6px;
    color:#333;
    position: absolute;
    right: 52px;
    top:9px;
    margin: 0;
    text-align: center;
  }
  .help:hover p{
    display: block;
  }
  .help div img{
    width: 16px;
    height: 16px;
    position: absolute;
    left:1px;
    top:1px;
  }
  .code{
    width: 44px;
    height: 34px;
    /* 设置圆角 */
    border-radius: 50%;
    position: relative;
    text-align: center;
    padding-top: 10px;
  }
  .code img{
    width: 24px;
    height: 24px;
    /* margin-top:10px; */
  }
  .code img.code2{
    display: none;
  }
  .code:hover img.code1{
    display: none;
  }
  .code:hover img.code2{
    display: inline-block;
  }
  .code .saoma{
    display: none;
    position: absolute;
    right: 56px;
    bottom: 0;
    width: 306px;
    height: 107px;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    border-radius: 12px;
  }
  .code:hover .saoma{
    display: block;
  }
  .saoma div{
    float: left;
    margin:28px 0 0 16px;
  }
  .saoma div h1{
    font-size: 20px;
    color:#333;
    font-weight: normal;
    font-family: Arial;
    overflow: hidden;
    margin:0;
  }
  .saoma div i{
    font-size:26px;
    float:left;
    margin-top:3px;
  }
  .saoma div span{
    float: left;
  }
  .saoma div p{
    color:#9195a3;
    font-size:14px;
    text-align: left;
    margin:0;
    margin-top:4px;
  }
  .saoma img{
    width:75px;
    height:75px;
    float: right;
    margin:16px 16px 0 0;
  }
  </style>
</head>
<body>
  <!--顶部导航条-->
  <div class="navbar">
    <ul class="menu">
      <li><a href="#">新闻</a></li>
      <li><a href="#">hao123</a></li>
      <li><a href="#">地图</a></li>
      <li><a href="#">贴吧</a></li>
      <li><a href="#">视频</a></li>
      <li><a href="#">图片</a></li>
      <li><a href="#">网盘</a></li>
      <li class="more">
        <a href="#">更多</a>
        <ul class="moreBox">
          <li>
            <a href="#"><img src="./images/newfanyi.png" alt=""></a>
            <a href="#">翻译</a>
          </li>
          <li>
            <a href="#"><img src="./images/newxueshuicon.png" alt=""></a>
            <a href="#">学术</a>
          </li>
          <li>
            <a href="#"><img src="./images/newwenku.png" alt=""></a>
            <a href="#">文库</a>
          </li>
          <li>
            <a href="#"><img src="./images/newbaike.png" alt=""></a>
            <a href="#">百科</a>
          </li>
          <li>
            <a href="#"><img src="./images/newzhidao.png" alt=""></a>
            <a href="#">知道</a>
          </li>
          <li>
            <a href="#"><img src="./images/newjiankang.png" alt=""></a>
            <a href="#">健康</a>
          </li>
          <li>
            <a href="#"><img src="./images/yingxiaoicon.png" alt=""></a>
            <a href="#">营销推广</a>
          </li>
          <li>
            <a href="#"><img src="./images/newzhibo.png" alt=""></a>
            <a href="#">直播</a>
          </li>
          <li>
            <a href="#"><img src="./images/newyinyue.png" alt=""></a>
            <a href="#">音乐</a>
          </li>
          <li class="all"><a href="#">查看全部百度产品 ></a></li>
        </ul>
      </li>
    </ul>
    <ul class="setting">
      <li class="setBox">
        <span>设置</span>
        <div>
          <a href="#">搜索设置</a>
          <a href="#">高级搜索</a>
          <a href="#">关闭预测</a>
          <a href="#">隐私设置</a>
          <a href="#">关闭热搜</a>
        </div>
      </li>
      <li class="loginBtn">
        登录
        <div class="mask">
          <div class="loginBox">
            <div class="close">
              <a href="#"><img src="./images/newloginlogo.png" alt=""></a>
              <img src="./images/uni-close.png" alt="" class="closeBtn">
            </div>
            <div class="loginContent">
              <div class="qrcode">
                <div class="qrcode-img">
                  <div><img src="./images/qrcode.png" alt=""></div>
                  <img src="./images/qrcodeLoginGuide1.png" alt="" class="guide">
                </div>
                <p>请使用百度APP扫码登录</p>
                <div class="download">
                  <a href="#"><img src="./images/baidu-download-icon.png" alt="">下载百度APP</a>
                  <div class="downloadBox">
                    <div><img src="./images/qrcode.png" alt=""></div>
                    <p>扫描二维码下载百度APP</p>
                  </div>
                </div>
              </div>
              <div class="loginForm">
                <form action="">
                  <div class="loginMode">
                    <h1 class="now">账号登录</h1>
                    <h1>短信登录</h1>
                  </div>
                  <div class="input">
                    <input type="text" placeholder="手机号/用户名/邮箱">
                  </div>
                  <div class="input">
                    <input type="password" placeholder="密码">
                  </div>
                  <p>忘记密码？</p>
                  <div class="sub"><input type="submit" value="登录"></div>
                  <div class="readme">阅读并接受<a href="#">百度用户协议</a> 和 <a href="#">隐私政策</a></div>
                </form>
              </div>
            </div>
            <div class="other">
              <div class="left">
                <a href="#"><img src="./images/bd-acc-qzone.png" alt=""></a>
                <a href="#"><img src="./images/bd-acc-tsina.png" alt=""></a>
                <a href="#"><img src="./images/bd-acc-weixin.png" alt=""></a>
              </div>
              <div class="register"><a href="#">立即注册</a></div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <!--百度logo-->
  <div class="logo">
    <a href="#" title="点击一下，了解更多"><img src="./images/logo.png" alt=""></a>
  </div>
  <!--搜索框-->
  <div class="container">
    <div class="searchBox">
      <form action="" method="post" autocomplete="off">
        <div class="searchBorder">
          <input type="text" class="txt">
          <span><i>按图片搜索</i></span>
          <div class="tips">
           <!--  <a href="#">提示内容一</a>
            <a href="#">提示内容二</a>
            <a href="#">提示内容三</a> -->
          </div>
        </div>
        <input type="submit" value="百度一下" class="search">
      </form>
    </div>
  </div>
  <!--百度热搜-->
  <div class="container2">
    <ul>
      <li class="hotsearch-title">
        <a href="#" class="resou"><span>百度热搜</span><i class="iconfont icon-arrow-right"></i></a>
        <a href="#" class="refresh"><span>换一换</span><i class="iconfont icon-refresh"></i></a>
      </li>
      <li class="list">
        <div>
          <a href="#"><i class="iconfont icon-zhiding hot1"></i><span>2022值得期待的生活新变化</span></a>
          <a href="#"><em class="hot1">1</em><span>俄罗斯宣布制裁拜登</span><b>热</b></a>
          <a href="#"><em class="hot2">2</em><span>昨日新增本土“1860+1194”</span><b>热</b></a>
        </div>
        <div>
          <a href="#"><em class="hot2">3</em><span>轻症病例为何可以实行集中隔离管理</span><b>热</b></a>
          <a href="#"><em class="hot3">4</em><span>康师傅致歉：取消与插旗菜业合作</span></a>
          <a href="#"><em class="hot3">5</em><span>乌总统：不入北约是必须承认的事实</span></a>
        </div>
      </li>
    </ul>
  </div>
  <!--底部导航条-->
  <div class="footer">
    <a href="#">关于百度</a>
    <a href="#">About Baidu</a>
    <a href="#">使用百度前必读</a>
    <a href="#">帮助中心</a>
    <a href="#">京公网安备11000002000001号</a>
    <a href="#">京ICP证030173号</a>
    <span>©2022 Baidu</span> 
    <a href="#">互联网药品信息服务资格证书 (京)-经营性-2017-0020</a>
    <a href="#">信息网络传播视听节目许可证 0110516</a>
    <img src="./images/aria.png" alt="">
  </div>
  <!--工具栏-->
  <div class="toolbar">
    <div class="help">
      <div><img src="./images/help.png" alt=""></div>
      <p>辅助模式</p>
    </div>
    <div class="code">
      <img src="./images/code.png" alt="" class="code1">
      <img src="./images/code2.png" alt="" class="code2">
      <div class="saoma">
        <div>
          <h1><i class="iconfont icon-saoma"></i><span>百度APP扫码登录</span></h1>
          <p>百度一下 生活更好</p>
        </div>
        <img src="./images/qrcode.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>
<script>
  $(".txt")[0].oninput=function(){
    $(".tips").css("display","block");
    key=$(this).val();
    $.ajax({
      type:"get",
      url:"http://teach.mengmacoding.com/interface/search.php",
      data:{keywords:key},
      dataType:"json",
      success:function(result){
        console.log(result);
        for(var i=0;i<result.length;i++){
          console.log(result[i].title);
          document.querySelector(".tips").innerHTML+="<p>"+result[i].title+"<p>"
        }
      }
    })
  }
</script>